<template>
  <div class="management">
    <div class="management_top">
      <h3>X!d!a!</h3>
      <h5>后台管理系统</h5>
      <h4>于影而驰的个人小站</h4>
    </div>
    <div class="management_bottom">
      <div class="management_bottom_left">
        <ul>
          <li
            :class="{ choose_active: choose === 1 }"
            @click="
              choose = 1;
              comName='newfy';
            "
          >
            新建文章
          </li>
          <li
            :class="{ choose_active: choose === 2 }"
            @click="
              choose = 2;
              comName='modify';
            "
          >
            修改文章
          </li>
        </ul>
      </div>
      <div class="management_bottom_right">
        <keep-alive>
          <component :is="comName"></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import newfy from "@/components/user_info/Views/NewArticles.vue";
import modify from "@/components/user_info/Views/ModifyArticle.vue";
export default {
  name:"Management",
  data() {
    return {
      choose: 1,
      comName:"newfy"
    };
  },
  components:{
    newfy,
    modify
  }
};
</script>

<style lang="less" scoped>
.management {
  width: 100%;
  height: 150vh;
  display: flex;
  flex-direction: column;
  user-select: none;
  .management_top {
    width: 100%;
    height: 64px;
    background-color: rgba(4, 4, 4, 0.712);
    box-shadow: 0 0 4px 6px rgba(55, 55, 55, 0.665);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    box-sizing: border-box;
    padding: 10px 50px;
    h3 {
      letter-spacing: 4px;
      color: #fff;
      font-family: english;
      font-size: 60px;
      text-shadow: 0 0 4px rgb(6, 129, 177), 0 0 14px rgb(6, 129, 177),
        0 0 24px rgb(6, 129, 177);
    }
    h5 {
      color: white;
      font-size: 25px;
    }
    h4 {
      letter-spacing: 2px;
      color: #fff;
      font-size: 20px;
      font-family: xda01;
    }
  }
  .management_bottom {
    display: flex;
    flex: 1;
    background-color: rgb(112, 112, 112);
    .management_bottom_left {
      
      width: 190px;
      height: 100%;
      border-right: 3px solid rgb(133, 133, 133);
      background-color: rgb(59, 59, 59);
      user-select: none;
      ul {
        display: flex;
        flex-direction: column;
        background-color: rgb(138, 138, 138);
        li {
          letter-spacing: 4px;
          height: 40px;
          padding: 0 15px;
          line-height: 40px;
          font-size: 20px;
          color: rgb(214, 214, 214);
          cursor: pointer;
          border-left: 10px solid rgb(138, 138, 138);
        }
        .choose_active {
          background-color: rgb(210, 210, 210);
          color: rgb(60, 60, 60);
          border-left: 10px solid rgb(43, 254, 244);
        }
      }
    }
    .management_bottom_right {
      flex: 1;
      display: flex;
      margin-left: 15px;
    }
  }
}
</style>